<!doctype html>
<html class="no-js fixed-layout">
<head>
    <!-- 公共head Begin -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
    <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
    <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>萌宠之家-C2B2C社会化电商平台</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="statics/img/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
    <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
    <!--<![endif]-->

    <script src="statics/js/plugin/jquery.cookie.js"></script>

    <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
    <script src="statics/js/plugin/jquery.form.js"></script>

    <script src="statics/js/jquery.lSelect.js"></script>
    <script src="statics/js/plugin/jquery.metadata.js"></script>
    <script src="statics/js/product.js"></script>
    <!-- 公共head End -->
</head>
<body>
<!-- 网页头部 Begin -->
<div class="header"></div>
<!-- 网页头部 End -->

<div class="am-cf shop-main">
    <!-- content start -->
    <div class="shop-content">
        <div class="shop-content-body">
            <div class="am-g">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-padding-horizontal-xs">
                    <div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">
                        <ul class="am-slides">
                            <li><img src="statics/img/banner1.jpg" /></li>
                            <li><img src="statics/img/banner2.jpg" /></li>
                            <li><img src="statics/img/banner3.jpg" /></li>
                            <li><img src="statics/img/banner4.jpg" /></li>
                            <li><img src="statics/img/banner5.jpg" /></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="am-panel am-panel-secondary">
                <div class="am-panel-hd" style="background-color: rgba(221,81,76,.115);">
                    <ol class="am-breadcrumb am-breadcrumb-slash am-padding-0 am-margin-0">
                        <li class="am-active" style="font-weight:bold; color:#dd514c;"><span class="am-icon-trophy"> </span>热度Top10</li>
                    </ol>
                </div>
                <div class="am-panel-bd">
                    <ul id="ulHotProductList" class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 am-thumbnails">
                    </ul>
                </div>
            </div>

            <div class="am-panel am-panel-success">
                <div class="am-panel-hd" style="background-color: rgba(14,144,210,.115);">
                    <ol class="am-breadcrumb am-breadcrumb-slash am-padding-0 am-margin-0">
                        <li class="am-active" style="font-weight: bold; color:#0b76ac;"><span class="am-icon-thumbs-up"> </span>精品推荐</li>
                    </ol>
                </div>
                <div class="am-panel-bd">
                    <ul id="ulRecommendProductList" class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 am-thumbnails">
                    </ul>
                </div>
            </div>
            <!-- 加载友情链接 Begin -->
            <div class="friend-link"></div>
            <!-- 加载友情链接 End -->
        </div>
    </div>
    <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>

<script type="text/javascript">

    // 首页列表Map
    let indexMap = new Object();

    $(function(){

        // 加载公共顶部模板
        $('.header').load('header.html');

        // 加载'首页'数据
        loadIndex();

    });// $(function());

/**	加载'首页'数据 **/
function loadIndex() {

    // 加载'首页'数据
    $.post('http://localhost:8080/index/mall', function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        indexMap = result.data;

        // 填充'热门Top10'商品列表
        fillHotProductList();

        // 填充'精品推荐'商品列表
        fillRecommendProductList();

    });// $.post();

}// loadIndex();

/** 填充表格数据 **/
function fillHotProductList( ) {

    // 清空表格数据
    $('#ulHotProductList').empty();

    // 如果没有集合数据，就直接返回
    if( !indexMap || !indexMap.hotProductList || indexMap.hotProductList.length == 0 ){
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < indexMap.hotProductList.length; i++ ) {

        let product = indexMap.hotProductList[i];

        // 链接
        let liLink = '<li><a href="product_content.html?id=' + product.id + '&cid=' + product.categoryId + '">';

        // 图片
        let imgUrl = '<img class="am-thumbnail am-radius am-margin-bottom-0" src="'
                        + IMAGE_URL_CONST.PRODUCT + product.mainImage + '" />';
        // 名称
        let pName = '<p class="am-kai am-text-sm am-text-center am-text-truncate am-margin-0"><i style="font-weight: bold;"> ' + product.name + '</i></p>';

        // 价格
        let pPrice = '<p class="am-monospace am-text-danger am-text-center am-margin-0">' + priceCurrencyFormat(product.price) + '</p>';

        // 封装整条li
        liLink += imgUrl + pName + pPrice + '</a></li>';

        // 将构造好的单元格数据，填充到表格中
        $('#ulHotProductList').append(liLink);

    }// for();

}// fillHotProductList();

/** 填充表格数据 **/
function fillRecommendProductList( ) {

    // 清空表格数据
    $('#ulRecommendProductList').empty();

    // 如果没有集合数据，就直接返回
    if( !indexMap || !indexMap.recommendProductList || indexMap.recommendProductList.length == 0 ){
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < indexMap.recommendProductList.length; i++ ) {

        let product = indexMap.recommendProductList[i];

        // 链接
        let liLink = '<li><a href="product_content.html?id=' + product.id + '&cid=' + product.categoryId + '">';

        // 图片
        let imgUrl = '<img class="am-thumbnail am-radius am-margin-bottom-0" src="'
            + IMAGE_URL_CONST.PRODUCT + product.mainImage + '" />';


        // 名称
        let pName = '<p class="am-kai am-text-sm am-text-center am-text-truncate am-margin-0">' + product.name + '</p>';

        // 价格
        let pPrice = '<p class="am-monospace am-text-danger am-text-center am-margin-0">' + priceCurrencyFormat(product.price) + '</p>';

        // 封装整条li
        liLink += imgUrl + pName + pPrice + '</a></li>';

        // 将构造好的单元格数据，填充到表格中
        $('#ulRecommendProductList').append(liLink);

    }// for();

}// fillRecommendProductList();
</script>
</html>